<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ name }} - Professional Portfolio Analytics</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* Design System Variables */
        :root {
            /* Colors */
            --primary: #4F46E5;
            --primary-dark: #4338CA;
            --primary-light: #818CF8;
            --secondary: #06B6D4;
            --success: #10B981;
            --danger: #EF4444;
            --warning: #F59E0B;
            --info: #3B82F6;
            
            /* Neutrals */
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;
            
            /* Shadows */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            
            /* Typography */
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
        }

        /* Reset & Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--gray-50);
            color: var(--gray-900);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Navigation Bar */
        .navbar {
            background: white;
            border-bottom: 1px solid var(--gray-200);
            position: sticky;
            top: 0;
            z-index: 50;
            box-shadow: var(--shadow-sm);
        }

        .nav-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 1.5rem;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .nav-logo {
            width: 32px;
            height: 32px;
            background: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1.125rem;
        }

        .nav-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .nav-time {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--gray-600);
            font-size: 0.875rem;
            font-family: var(--font-mono);
        }

        .theme-toggle {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--gray-600);
            transition: all 0.2s;
        }

        .theme-toggle:hover {
            background: var(--gray-50);
            color: var(--gray-900);
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-pattern {
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 1440px;
            margin: 0 auto;
            padding: 3rem 1.5rem;
            text-align: center;
        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.5rem;
            letter-spacing: -0.025em;
        }

        .hero-subtitle {
            font-size: 1.125rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 400;
        }

        /* Main Container */
        .main-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 1.5rem 4rem;
        }

        /* Key Metrics Section */
        .metrics-section {
            margin: -2rem 0 3rem;
            position: relative;
            z-index: 20;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }
        
        @media (max-width: 1024px) {
            .metrics-grid {
                grid-template-columns: 1fr;
            }
        }

        .metric-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--gray-200);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-xl);
        }

        .metric-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .metric-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .metric-icon.blue {
            background: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }

        .metric-icon.green {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }

        .metric-icon.purple {
            background: rgba(139, 92, 246, 0.1);
            color: #8B5CF6;
        }

        .metric-trend {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .metric-trend.up {
            color: var(--success);
        }

        .metric-trend.down {
            color: var(--danger);
        }

        .metric-content h3 {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--gray-600);
            margin-bottom: 0.25rem;
        }

        .metric-value {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.2;
        }

        .metric-description {
            font-size: 0.875rem;
            color: var(--gray-500);
            margin-top: 0.5rem;
        }

        /* Content Sections */
        .content-section {
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-200);
            margin-bottom: 2rem;
            overflow: hidden;
        }

        .section-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--gray-50);
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .section-title i {
            font-size: 1.125rem;
            color: var(--primary);
        }

        .section-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-control {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--gray-600);
            transition: all 0.2s;
        }

        .btn-control:hover {
            background: var(--gray-50);
            border-color: var(--gray-400);
            color: var(--gray-900);
        }

        .section-body {
            padding: 2rem;
        }

        /* Analysis Layout */
        .analysis-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: start;
        }

        /* Data Panel */
        .data-panel {
            background: var(--gray-50);
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid var(--gray-200);
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .panel-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .panel-title i {
            font-size: 0.875rem;
            color: var(--gray-500);
        }

        .panel-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-action {
            padding: 0.25rem 0.75rem;
            border-radius: 6px;
            border: 1px solid var(--gray-300);
            background: white;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--gray-700);
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-action:hover {
            background: var(--gray-50);
            border-color: var(--gray-400);
        }

        /* Chart Panel */
        .chart-panel {
            background: var(--gray-50);
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid var(--gray-200);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 1rem;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--gray-200);
            min-height: 400px;
        }

        .chart-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* Tables */
        .table-container {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--gray-200);
        }

        table.data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }

        table.data-table thead {
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
        }

        table.data-table th {
            padding: 0.75rem 1rem;
            text-align: left;
            font-weight: 600;
            color: var(--gray-700);
            white-space: nowrap;
        }

        table.data-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--gray-100);
            color: var(--gray-900);
        }

        table.data-table tbody tr:hover {
            background: var(--gray-50);
        }

        table.data-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Performance Badge */
        .performance-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .performance-badge.positive {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }

        .performance-badge.negative {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }

        /* Position Tables */
        .position-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .position-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--gray-200);
        }

        .position-header {
            padding: 1rem 1.5rem;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .position-header i {
            font-size: 1rem;
        }

        .position-header.long {
            color: var(--success);
        }

        .position-header.short {
            color: var(--danger);
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--gray-200);
        }

        .stat-header {
            padding: 1rem 1.5rem;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            font-weight: 600;
            color: var(--gray-900);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stat-header i {
            color: var(--primary);
            font-size: 0.875rem;
        }

        /* Footer */
        .footer {
            background: var(--gray-900);
            color: white;
            padding: 3rem 0;
            margin-top: 4rem;
        }

        .footer-content {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 1.5rem;
            text-align: center;
        }

        .footer-brand {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .footer-text {
            color: var(--gray-400);
            font-size: 0.875rem;
        }

        /* Utilities */
        .text-success { color: var(--success); }
        .text-danger { color: var(--danger); }
        .text-warning { color: var(--warning); }
        .text-info { color: var(--info); }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }

        /* Loading State */
        .skeleton {
            background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-title { font-size: 2rem; }
            .main-container { padding: 0 1rem 3rem; }
            .section-body { padding: 1.5rem; }
            .data-panel, .chart-panel { padding: 1rem; }
            .metrics-grid { gap: 1rem; }
            .analysis-grid { gap: 1.5rem; }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <div class="nav-logo">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h1 class="nav-title">PyFolio Analytics</h1>
            </div>
            <div class="nav-actions">
                <div class="nav-time">
                    <i class="far fa-clock"></i>
                    <span id="current-time"></span>
                </div>
                <button class="theme-toggle" title="Toggle theme">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <header class="hero">
        <div class="hero-pattern"></div>
        <div class="hero-content">
            <h1 class="hero-title">策略绩效分析报告</h1>
            <p class="hero-subtitle">Professional Quantitative Strategy Performance Analysis</p>
        </div>
    </header>

    <!-- Main Content -->
    <main class="main-container">
        <!-- Key Metrics -->
        <section class="metrics-section fade-in">
            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-icon blue">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="metric-trend up">
                            <i class="fas fa-arrow-up"></i>
                            <span>+2.5%</span>
                        </div>
                    </div>
                    <div class="metric-content">
                        <h3>年化收益率</h3>
                        <div class="metric-value">19.7%</div>
                        <p class="metric-description">Annual returns</p>
                    </div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-icon green">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="metric-trend up">
                            <i class="fas fa-arrow-up"></i>
                            <span>1.53</span>
                        </div>
                    </div>
                    <div class="metric-content">
                        <h3>夏普比率</h3>
                        <div class="metric-value">1.532</div>
                        <p class="metric-description">Risk-adjusted returns</p>
                    </div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-icon purple">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <div class="metric-trend down">
                            <i class="fas fa-arrow-down"></i>
                            <span>-8.9%</span>
                        </div>
                    </div>
                    <div class="metric-content">
                        <h3>最大回撤</h3>
                        <div class="metric-value">-8.9%</div>
                        <p class="metric-description">Maximum drawdown</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Performance Analysis -->
        <section class="content-section fade-in">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-chart-area"></i>
                    收益表现分析 Performance Analysis
                </h2>
                <div class="section-controls">
                    <button class="btn-control" onclick="toggleSection('performance-content')">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            </div>
            <div id="performance-content" class="section-body">
                <div class="analysis-grid">
                    <div class="data-panel">
                        <div class="panel-header">
                            <h3 class="panel-title">
                                <i class="fas fa-table"></i>
                                Performance Metrics
                            </h3>
                            <div class="panel-actions">
                                <button class="btn-action">Export</button>
                            </div>
                        </div>
                        <div class="table-container">
                            {% for table in performance_tables %}
                                {{ table|safe }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="chart-panel">
                        <div class="panel-header">
                            <h3 class="panel-title">
                                <i class="fas fa-chart-line"></i>
                                Cumulative Returns
                            </h3>
                            <div class="panel-actions">
                                <button class="btn-action">1M</button>
                                <button class="btn-action">3M</button>
                                <button class="btn-action">1Y</button>
                                <button class="btn-action">ALL</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <img src="{{ url_for('static', filename=static_images[0]) }}" 
                                 alt="Returns Analysis" 
                                 class="chart-image">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Risk Analysis -->
        <section class="content-section fade-in">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-exclamation-triangle"></i>
                    风险分析 Risk Analysis
                </h2>
                <div class="section-controls">
                    <button class="btn-control" onclick="toggleSection('risk-content')">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            </div>
            <div id="risk-content" class="section-body">
                <div class="analysis-grid">
                    <div class="data-panel">
                        <div class="panel-header">
                            <h3 class="panel-title">
                                <i class="fas fa-bolt"></i>
                                Stress Events Performance
                            </h3>
                        </div>
                        <div class="table-container">
                            {% for table in stress_events_tables %}
                                {{ table|safe }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="chart-panel">
                        <div class="panel-header">
                            <h3 class="panel-title">
                                <i class="fas fa-chart-bar"></i>
                                Risk Metrics Visualization
                            </h3>
                        </div>
                        <div class="chart-container">
                            <img src="{{ url_for('static', filename=static_images[1]) }}" 
                                 alt="Risk Analysis" 
                                 class="chart-image">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Position Analysis -->
        <section class="content-section fade-in">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-coins"></i>
                    持仓分析 Position Analysis
                </h2>
                <div class="section-controls">
                    <button class="btn-control" onclick="toggleSection('position-content')">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            </div>
            <div id="position-content" class="section-body">
                <div class="analysis-grid">
                    <div class="data-panel">
                        <div class="position-grid">
                            <div class="position-card">
                                <div class="position-header long">
                                    <i class="fas fa-arrow-trend-up"></i>
                                    <h4>Long Positions TOP 10</h4>
                                </div>
                                <div class="table-container">
                                    {% for table in long_position_tables %}
                                        {{ table|safe }}
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="position-card">
                                <div class="position-header short">
                                    <i class="fas fa-arrow-trend-down"></i>
                                    <h4>Short Positions TOP 10</h4>
                                </div>
                                <div class="table-container">
                                    {% for table in short_position_tables %}
                                        {{ table|safe }}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chart-panel">
                        <div class="panel-header">
                            <h3 class="panel-title">
                                <i class="fas fa-chart-pie"></i>
                                Position Distribution
                            </h3>
                        </div>
                        <div class="chart-container">
                            <img src="{{ url_for('static', filename=static_images[2]) }}" 
                                 alt="Position Analysis" 
                                 class="chart-image">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Additional Statistics -->
        <section class="content-section fade-in">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-database"></i>
                    详细统计 Detailed Statistics
                </h2>
                <div class="section-controls">
                    <button class="btn-control" onclick="toggleSection('stats-content')">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            </div>
            <div id="stats-content" class="section-body">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-chart-line"></i>
                            Maximum Drawdown Periods
                        </div>
                        <div class="table-container">
                            {% for table in worst_drawdown_tables %}
                                {{ table|safe }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-list-ol"></i>
                            Top Holdings All Time
                        </div>
                        <div class="table-container">
                            {% for table in total_position_tables %}
                                {{ table|safe }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-calendar-alt"></i>
                            Monthly Returns
                        </div>
                        <div class="table-container">
                            {% for table in total_months_tables %}
                                {{ table|safe }}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-brand">PyFolio Analytics Platform</div>
            <p class="footer-text">© 2025 CloudQuant Technology. Professional Quantitative Investment Analysis.</p>
        </div>
    </footer>

    <script>
        // Update current time
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('current-time').textContent = timeString;
        }
        updateTime();
        setInterval(updateTime, 1000);

        // Toggle section visibility
        function toggleSection(sectionId) {
            const section = document.getElementById(sectionId);
            const icon = section.previousElementSibling.querySelector('.btn-control i');
            
            if (section.style.display === 'none') {
                section.style.display = 'block';
                icon.className = 'fas fa-chevron-down';
            } else {
                section.style.display = 'none';
                icon.className = 'fas fa-chevron-right';
            }
        }

        // Add fade-in animation to elements as they appear
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.content-section').forEach(section => {
            observer.observe(section);
        });

        // Style tables
        document.querySelectorAll('table').forEach(table => {
            if (!table.classList.contains('data-table')) {
                table.classList.add('data-table');
            }
        });

        // Theme toggle (placeholder)
        document.querySelector('.theme-toggle').addEventListener('click', function() {
            console.log('Theme toggle clicked');
            // Implement dark mode toggle here
        });
    </script>
</body>
</html>